<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>可选课程</el-breadcrumb-item>
    </el-breadcrumb>
    <h3>可选课程列表</h3>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.teacherName" placeholder="教师名"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.courseName" placeholder="课程名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="selectPage()">查询</el-button>
    </el-form>

    <el-table
        :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column prop="courseNumber" label="课程编号"/>
      <el-table-column prop="courseName" label="课程名称"/>
      <el-table-column prop="teacherName" label="教师姓名"/>
      <el-table-column prop="capacity" label="课程容量"/>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     icon="el-icon-edit"
                     @click="selectCourse(scope.row.id)">
            选课
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination
        :current-page="current"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="selectPage"/>

  </div>
</template>
<script>
//引入接口定义的js文件
import schedule from '@/api/schedule'
import selection from "@/api/selection";

export default {
  //定义变量和初始值
  data() {
    return {
      current: 1, //当前页
      limit: 5, //每页显示记录数
      searchObj: {}, //查询指定教师排课
      list: [], //每页数据集合
      total: 0, //总记录数
      schedule: {}
    }
  },
  created() { //在页面渲染之前执行
    //一般调用methods定义的方法，得到数据
    this.selectPage()
  },
  methods: {//定义方法，进行请求接口调用
    //排课信息列表
    selectPage(page = 1) { //添加当前页参数
      this.current = page
      schedule.selectPage(this.current, this.limit, this.searchObj)
          .then(response => { //请求成功response是接口返回数据
            //返回集合赋值list
            this.list = response.data.data.records
            //总记录数
            this.total = response.data.data.total
          })
          .catch(error => {//请求失败
            console.log(error)
          })
    },
    selectCourse(id) {
      this.$confirm('确定选择该门课程？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定执行then方法
        //调用接口
        const studentId = JSON.parse(localStorage.getItem('user')).id;
        selection.selectCourse(studentId, id)
            .then(response => {
              //提示
              if (response.data.code === "20000") {
                this.$message({
                  type: 'success',
                  message: '选课成功!'
                })
                //刷新页面
                this.selectPage(1)
              } else {
                this.common.errorReturn(this, response.data.message);
              }
            })
      })
    }
  }
}
</script>
